<template>
  <div style="padding: 20px" class="myTabs">
    <Alert message="导航示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">多窗口导航</div>
    <div class="demoTittle2">多窗口导航是项目组件↑</div>
    <div class="demoTittle">Tab标签导航</div>
    <div class="demoTittle2">使用antdv的a-tabs组件</div>
    <a-tabs v-model:activeKey="activeKey" size="large">
      <a-tab-pane key="1" tab="待维修工单 1">Content of Tab Pane 1</a-tab-pane>
      <a-tab-pane key="2" tab="待维修工单 2" force-render>Content of Tab Pane 2</a-tab-pane>
      <a-tab-pane key="3" tab="待维修工单 3">Content of Tab Pane 3</a-tab-pane>
    </a-tabs>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="待维修工单 1">Content of Tab Pane 1</a-tab-pane>
      <a-tab-pane key="2" tab="待维修工单 2" force-render>Content of Tab Pane 2</a-tab-pane>
      <a-tab-pane key="3" tab="待维修工单 3">Content of Tab Pane 3</a-tab-pane>
    </a-tabs>
    <div class="demoTittle">tab框导航</div>
    <a-tabs v-model:activeKey="activeKey1" type="card">
      <a-tab-pane key="1" tab="测试方案一">Content of Tab Pane 1</a-tab-pane>
      <a-tab-pane key="2" tab="测试方案二">Content of Tab Pane 2</a-tab-pane>
      <a-tab-pane key="3" tab="测试方案三">Content of Tab Pane 3</a-tab-pane>
    </a-tabs>
    <div class="demoTittle">面包屑</div>
    <div class="demoTittle2">使用antdv的a-breadcrumb组件</div>
    <a-space direction="vertical">
      <a-breadcrumb class="myBreadText">
        <a-breadcrumb-item>首页</a-breadcrumb-item>
        <a-breadcrumb-item>活动管理</a-breadcrumb-item>
      </a-breadcrumb>
      <a-breadcrumb separator="" class="myBreadText">
        <a-breadcrumb-item>活动管理</a-breadcrumb-item>
        <a-breadcrumb-separator>|</a-breadcrumb-separator>
        <a-breadcrumb-item href="">首页</a-breadcrumb-item>
        <a-breadcrumb-separator>></a-breadcrumb-separator>
        <a-breadcrumb-item>报警管理</a-breadcrumb-item>
      </a-breadcrumb>
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="">首页</a-breadcrumb-item>
        <a-breadcrumb-item href="">活动管理</a-breadcrumb-item>
        <a-breadcrumb-item href="">活动列表</a-breadcrumb-item>
        <a-breadcrumb-item>活动详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  const activeKey = ref('1');
  const activeKey1 = ref('1');
</script>

<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
    margin-bottom: 18px;
  }
  .myTabs {
    :deep(.ant-tabs-tab) {
      border-bottom: none;
    }
  }
  .myBreadText {
    font-size: 20px;
  }
  .myBreadcrumb {
    display: flex;

    align-items: center;
  }
</style>
